<template>
  <div class="app-header">
    <div class="container">
      <!-- logo区域 -->
      <h1 class="logo">
        <router-link to="/">小兔鲜</router-link>
      </h1>

      <!-- 使用头部导航组件 -->
      <AppHeaderNav></AppHeaderNav>

      <!-- 搜索框 -->
      <div class="search">
        <i class="iconfont icon-search"></i>
        <input v-model="params.keyword"
               placeholder="搜一搜"
               type="text"
               @keyup.enter="submit">
      </div>

      <!-- 使用头部购物车组件 -->
      <AppHeaderCart></AppHeaderCart>
    </div>
  </div>
</template>

<script>
import AppHeaderNav from '@/components/header/AppHeaderNav'
import AppHeaderCart from '@/components/header/AppHeaderCart'
import { reactive } from 'vue'
import API from '@/api/goods'

export default {
  name: 'AppHeader',
  components: {
    AppHeaderCart,
    AppHeaderNav
  },
  setup() {
    // todo 处理商品搜索问题
    const params = reactive({
      page: 1,          // 页码
      pageSize: 20,     // 页尺寸
      keyword: '',      // 所输入的关键词
      associatedIds: [],// 联想词Id集合
      categoryId: '',   // 分类id
      brandId: '',      // 	品牌id
      onlyDiscount: '', // 只显示特惠
      sortField: '',    // 排序字段，取值范围：[publishTime,orderNum,price,evaluateNum]
      sortMethod: '',   // 排序规则，asc为正序，desc为倒序，默认为desc
    })

    const submit = () => {
      API.searchGoods(params)
          .then((res) => {
            console.log(res)
            // todo 然后呢, 如何让搜索页面
          })
    }

    return {
      params,
      submit
    }
  }
}
</script>

<style lang="less" scoped>

.app-header {
  height: 132px;
  background-color: #fff;

  .container {
    display: flex;
    align-items: center;

    .logo {
      width: 200px;

      a {
        display: block;
        width: 100%;
        height: 132px;
        background: url('../../assets/images/logo.png') no-repeat center 18px/contain;
        //background-size: cover;
        font-size: 0;
      }
    }

    .home {

    }
  }

  .search {
    width: 170px;
    height: 32px;
    border-bottom: 1px solid #e7e7e7;
    // todo 为什么要设置相对定位
    position: relative;
    line-height: 32px;

    .iconfont {
      font-size: 18px;
    }

    input {
      width: 140px;
      text-indent: 5px;
      color: #666;
    }
  }
}
</style>
